<template>
	<view>
		<block>
			<view class="container nodiydata" v-if="isload">
				<swiper v-if="pics.length > 0" class="swiper" :indicator-dots="pics[1] ? true : false" :autoplay="true"
					:interval="5000" indicator-color="#dcdcdc" indicator-active-color="#fff">
					<block v-for="(item, index) in pics" :key="index">
						<swiper-item class="swiper-item">
							<image :src="item" mode="widthFix" class="image" />
						</swiper-item>
					</block>
				</swiper>
				<view class="topcontent">
					<view class="logo">
						<image class="img" :src="business.logo" />
					</view>
					<view class="title">{{ business.name }}</view>
					<view class="desc">
						<view class="f1">
							{{ business.juli }}
						</view>
						<view class="f2">销量 {{ business.sales }}</view>

						<view class="tel f2" v-if="business.linktel">
							<view @tap="phone" :data-phone="business.linktel" class="tel_online">
								<image class="img" src="../static/images/tel.png" />
								{{ bset && bset.show_linktext ? bset.show_linktext : '联系商家' }}
							</view>
						</view>

					</view>

					<view class="flex-content">
						<view @click="gopay()" class="facepay" :style="{ background: '' + t('color2') + '' }">
							<view class="tel_online">
								<!--<image class="img" src="/pagesExt/static/images/facepay.png"/>-->
								门店当面付
							</view>
						</view>
					</view>

					<view class="address" @tap="openLocation" :data-latitude="business.latitude"
						:data-longitude="business.longitude" :data-company="business.name"
						:data-address="business.address">
						<image class="f1" src="/static/img/shop_addr.png" />
						<view class="f2">{{ business.address }}</view>
						<image class="f3" src="/static/img/arrowright.png" />
					</view>
				</view>

				<view class="givecontent" v-if="drinking_conditions.length > 0">
					<view class="label">领酒条件</view>
					<view v-for="(item, index) in drinking_conditions" :key="index" class="givecontent-item">
						消费满{{ item.money }}元，送{{ item.number }}瓶酒
					</view>
					<view class="receive_limit" v-if="business.receive_limit">
						<view class="label">领酒说明</view>
						<view class="limit-content">{{ business.receive_limit }}</view>
					</view>
				</view>


				<view class="apply-list">
					<view class="apply-list-bg"></view>
					<view class="apply-list-title">商家简介</view>
				</view>
				<view class="cp_detail" style="padding:20rpx">
					<dp :pagecontent="pagecontent"></dp>
				</view>
			</view>
		</block>
		<loading v-if="loading"></loading>

		<!-- #ifdef MP-TOUTIAO -->
		<view class="dp-cover" v-if="video_status">
			<button open-type="share" data-channel="video" class="dp-cover-cover" :style="{
				zIndex: 10,
				top: '60vh',
				left: '80vw',
				width: '110rpx',
				height: '110rpx'
			}">
				<image :src="static_url + '/static/img/uploadvideo2.png'"
					:style="{ width: '110rpx', height: '110rpx' }" />
			</button>
		</view>
		<!-- #endif -->

		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,
			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,

			isdiy: 0,

			st: 0,
			business: [],
			countcomment: 0,
			couponcount: 0,
			pics: [],
			pagenum: 1,
			datalist: [],
			topbackhide: false,
			nomore: false,
			nodata: false,

			title: "",
			sysset: "",
			pagecontent: '',
			drinking_conditions: []
		}
	},
	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.opt.bid = this.opt.id;
		this.st = this.opt.st || 0;
		this.getdata();
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	onReachBottom: function () {
		if (this.isdiy == 0) {
			if (!this.nodata && !this.nomore) {
				this.pagenum = this.pagenum + 1;
				this.getDataList(true);
			}
		}
	},
	onShareAppMessage: function () {
		//#ifdef MP-TOUTIAO
		console.log(shareOption);
		return {

			title: this.video_title,
			channel: "video",
			extra: {
				hashtag_list: this.video_tag,
			},
			success: () => {
				console.log("分享成功");
			},
			fail: (res) => {
				console.log(res);
				// 可根据 res.errCode 处理失败case
			},
		};
		//#endif
		return this._sharewx({
			title: this.business.name
		});
	},
	onPageScroll: function (e) {
		if (this.isdiy == 0) {
			var that = this;
			var scrollY = e.scrollTop;
			if (scrollY > 200 && !that.topbackhide) {
				that.topbackhide = true;
			}
			if (scrollY < 150 && that.topbackhide) {
				that.topbackhide = false;
			}
		}
	},
	methods: {
		getdata: function () {
			var that = this;
			var id = that.opt.id || 0;
			that.loading = true;
			app.get('Business/index', {
				id: id
			}, function (res) {
				that.loading = false;
				that.business = res.business;
				that.drinking_conditions = res.business.drinking_conditions
				that.pics = res.pics;
				that.pagecontent = res.pagecontent;
				that.sysset = res.sysset;
				that.loaded({
					title: that.business.name,
					pic: that.business.logo
				});
			});
		},

		openLocation: function (e) {
			//console.log(e)
			var latitude = parseFloat(e.currentTarget.dataset.latitude)
			var longitude = parseFloat(e.currentTarget.dataset.longitude)
			var address = e.currentTarget.dataset.address
			uni.openLocation({
				latitude: latitude,
				longitude: longitude,
				name: address,
				scale: 13
			})
		},
		phone: function (e) {
			var phone = e.currentTarget.dataset.phone;
			uni.makePhoneCall({
				phoneNumber: phone,
				fail: function () { }
			});
		},
		//门店模式end
		gopay() {
			uni.navigateTo({
				url: "/pages/facepay/pay?bid=" + this.business.id
			})
		}
	}
}
</script>
<style>
.container {
	position: relative
}


.nodiydata .swiper {
	width: 100%;
	height: 400rpx;
	position: relative;
	z-index: 1
}

.nodiydata .swiper .image {
	width: 100%;
	height: 400rpx;
	overflow: hidden;
}

.nodiydata .topcontent {
	width: 94%;
	margin-left: 3%;
	padding: 24rpx;
	border-bottom: 1px solid #eee;
	margin-bottom: 20rpx;
	background: #fff;
	margin-top: -120rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 16rpx;
	position: relative;
	z-index: 2;
}

.nodiydata .topcontent .logo {
	width: 160rpx;
	height: 160rpx;
	margin-top: -104rpx;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
}

.nodiydata .topcontent .logo .img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.nodiydata .topcontent .title {
	color: #222222;
	font-size: 36rpx;
	font-weight: bold;
	margin-top: 12rpx
}

.nodiydata .topcontent .desc {
	display: flex;
	align-items: center
}

.nodiydata .topcontent .desc .f1 {
	margin: 20rpx 0;
	font-size: 24rpx;
	color: #FC5648;
	display: flex;
	align-items: center
}

.nodiydata .topcontent .desc .f1 .img {
	width: 24rpx;
	height: 24rpx;
	margin-right: 10rpx;
}

.nodiydata .topcontent .desc .f2 {
	margin: 10rpx 0;
	padding-left: 60rpx;
	font-size: 24rpx;
	color: #999;
}

.nodiydata .topcontent .tel {
	font-size: 28rpx;
	color: #fff;
	padding: 16rpx 40rpx;
	border-radius: 60rpx;
	font-weight: normal
}

.nodiydata .topcontent .tel .img {
	width: 28rpx;
	height: 28rpx;
	vertical-align: middle;
	margin-right: 10rpx
}

.nodiydata .topcontent .address {
	width: 100%;
	display: flex;
	align-items: center;
	padding-top: 20rpx
}

.nodiydata .topcontent .address .f1 {
	width: 28rpx;
	height: 28rpx;
	margin-right: 8rpx
}

.nodiydata .topcontent .address .f2 {
	flex: 1;
	color: #999999;
	font-size: 26rpx
}

.nodiydata .topcontent .address .f3 {
	display: inline-block;
	width: 26rpx;
	height: 26rpx
}

.nodiydata .contentbox {
	width: 94%;
	margin-left: 3%;
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 32rpx;
	overflow: hidden
}

.nodiydata .shop_tab {
	display: flex;
	width: 100%;
	height: 90rpx;
	border-bottom: 1px solid #eee;
}

.nodiydata .shop_tab .cptab_text {
	flex: 1;
	text-align: center;
	color: #646566;
	height: 90rpx;
	line-height: 90rpx;
	position: relative
}

.nodiydata .shop_tab .cptab_current {
	color: #323233;
}

.nodiydata .shop_tab .after {
	display: none;
	position: absolute;
	left: 50%;
	margin-left: -16rpx;
	bottom: 10rpx;
	height: 3px;
	border-radius: 1.5px;
	width: 32rpx
}

.nodiydata .shop_tab .cptab_current .after {
	display: block;
}


.nodiydata .cp_detail {
	min-height: 500rpx
}

.nodiydata .comment .item {
	background-color: #fff;
	padding: 10rpx 20rpx;
	display: flex;
	flex-direction: column;
}

.nodiydata .comment .item .f1 {
	display: flex;
	width: 100%;
	align-items: center;
	padding: 10rpx 0;
}

.nodiydata .comment .item .f1 .t1 {
	width: 70rpx;
	height: 70rpx;
	border-radius: 50%;
}

.nodiydata .comment .item .f1 .t2 {
	padding-left: 10rpx;
	color: #333;
	font-weight: bold;
	font-size: 30rpx;
}

.nodiydata .comment .item .f1 .t3 {
	text-align: right;
}

.nodiydata .comment .item .f1 .t3 .img {
	width: 24rpx;
	height: 24rpx;
	margin-left: 10rpx
}

.nodiydata .comment .item .score {
	font-size: 24rpx;
	color: #f99716;
}

.nodiydata .comment .item .score image {
	width: 140rpx;
	height: 50rpx;
	vertical-align: middle;
	margin-bottom: 6rpx;
	margin-right: 6rpx;
}

.nodiydata .comment .item .f2 {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 10rpx 0;
}

.nodiydata .comment .item .f2 .t1 {
	color: #333;
	font-size: 28rpx;
}

.nodiydata .comment .item .f2 .t2 {
	display: flex;
	width: 100%
}

.nodiydata .comment .item .f2 .t2 image {
	width: 100rpx;
	height: 100rpx;
	margin: 10rpx;
}

.nodiydata .comment .item .f2 .t3 {
	color: #aaa;
	font-size: 24rpx;
}

.nodiydata .comment .item .f2 .t3 {
	color: #aaa;
	font-size: 24rpx;
}

.nodiydata .comment .item .f3 {
	width: 100%;
	padding: 10rpx 0;
	position: relative
}

.nodiydata .comment .item .f3 .arrow {
	width: 16rpx;
	height: 16rpx;
	background: #eee;
	transform: rotate(45deg);
	position: absolute;
	top: 0rpx;
	left: 36rpx
}

.nodiydata .comment .item .f3 .t1 {
	width: 100%;
	border-radius: 10rpx;
	padding: 10rpx;
	font-size: 22rpx;
	color: #888;
	background: #eee
}

.nodiydata .nomore-footer-tips {
	background: #fff !important
}

.nodiydata .covermy {
	position: fixed;
	z-index: 99999;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 9999;
	top: 81vh;
	left: 82vw;
	color: #fff;
	background-color: rgba(92, 107, 129, 0.6);
	width: 110rpx;
	height: 110rpx;
	font-size: 26rpx;
	border-radius: 50%;
}


.classify-ul {
	width: 100%;
	height: 70rpx;
	padding: 0 10rpx;
}

.classify-li {
	flex-shrink: 0;
	display: flex;
	background: #F5F6F8;
	border-radius: 22rpx;
	color: #6C737F;
	font-size: 20rpx;
	text-align: center;
	height: 44rpx;
	line-height: 44rpx;
	padding: 0 28rpx;
	margin: 12rpx 10rpx 12rpx 0
}

.dp-cover {
	height: auto;
	position: relative;
}

.dp-cover-cover {
	position: fixed;
	z-index: 99999;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: inherit;
}


.flex-content {
	display: flex;
	margin: 36rpx 0rpx;
}

.flex-content .facepay {
	margin-left: 24rpx;
	font-size: 28rpx;
	color: #fff;
	padding: 16rpx 60rpx;
	border-radius: 60rpx;
	font-weight: normal;
}

.flex-content .img {
	width: 28rpx;
	height: 28rpx;
	vertical-align: middle;
	margin-right: 10rpx
}

.apply-list {
	background-color: #fff;
	height: 100rpx;
	line-height: 100rpx;
	padding: 0rpx 30rpx;
	margin: 20rpx 0rpx 0rpx 0rpx;
	display: flex;
	align-items: center;
}

.apply-list-bg {
	height: 42rpx;
	width: 16rpx;
	border-radius: 24rpx;
	background: #eb544d;
	margin-right: 16rpx;
}

.apply-list-title {
	color: #010101;
	font-size: 28rpx;
	font-weight: bold;
}

.givecontent {
	padding: 24rpx;
	border-bottom: 1px solid #eee;
	margin-bottom: 20rpx;
	background: #fff;
	width: 100%;
	border-radius: 12rpx;
	margin: 0rpx 3%;
}

.givecontent-item {
	margin: 10rpx 0rpx;
	font-size: 26rpx;
	color: #999;
}

.givecontent .label {
	color: #eb544d;
}

.receive_limit {
	margin-top: 12rpx;
}

.limit-content {
	font-size: 26rpx;
	color: #999;
}
</style>